<template>
  <div>
    <div ref="msgDiv">{{ msg }}</div>
    <div>nextTick 1 ===  {{ msg1 }}</div>
    <div>nextTick 2===  {{ msg2 }}</div>
    <div>nextTick 3===  {{ msg3 }}</div>
    <div class="card">
      <div class="card-header bg-primary text-white">
        添加品牌
      </div>
      <div class="card-body form-inline">
        <label for="id" class="leftPoint">ID:</label>
        <input type="text" class="form-control leftPoint" id="id" v-model="id" v-fouces>
        <label for="NAME" class="leftPoint">NAME:</label>
        <!--keyup监听在button按钮上无效-->
        <input type="text" class="form-control leftPoint" id="NAME" v-model="name" @keyup.enter="addData">
        <button type="button" class="btn btn-primary leftPoint" @click="addData">添加</button>
        <label for="SEARCH" style="margin-left: 10px" class="leftPoint">NAME:</label>
        <input type="text" class="form-control leftPoint" id="SEARCH" v-model="keyword">
        <input type="text" class="form-control leftPoint" id="OTEHR" v-model="other" v-color="{color:'red', value: '2222'}">
      </div>
    </div>
    <table class="table table-striped table-bordered table-hover">
      <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Ctime</th>
        <th>Operation</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item) in search(keyword)" :key="item.id">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.time | dataFormat }}</td>
        <td>
          <a href="#" @click="deleteItem(item.id)">删除</a>
        </td>
      </tr>
      </tbody>
    </table>
    <table-practice like = "aaaaa" @func="getChildValue"></table-practice>
    <div>{{this.msgChild}}</div>
  </div>
</template>

<script>
import TablePractice from '@/components/TablePractice'
export default {
  name: '',
  data () {
    return {
      msgChild: '',
      message: 'hello',
      id: '',
      name: '',
      keyword: '',
      other: '2',
      carData: [{id: '1', name: '宝马', time: new Date()}, {id: '2', name: '奔驰', time: new Date()}],
      msg: 'Hello vue',
      msg1: '',
      msg2: '',
      msg3: ''
    }
  },
  methods: {
    /**
     * @param data  子组件传递过来的数据
     */
    getChildValue (data) {
      this.msgChild = data
    },
    addData () {
      let car = { id: this.id, name: this.name, time: new Date() }
      this.carData.push(car)
      this.id = this.name = ''
      this.msg1 = this.$refs.msgDiv.innerHTML
      this.msg2 = this.$refs.msgDiv.innerHTML
      // nextTick是异步DOM的，也就是说，当Vue生命周期在create时是去完成data，methods,filter等方法的初始化
      // mounted方法是完成DOM的渲染
      // $nextTick 是在DOM渲染之后完成回调，他可以放在create方法中去做数据改变时需要的渲染操作
      this.$nextTick(() => { this.msg2 = this.$refs.msgDiv.innerHTML })
      this.msg3 = this.$refs.msgDiv.innerHTML
      this.msg = 'Hello world'
    },
    search (keywords) {
      // 返回的是一个对象
      /**
       * filter js的一个函数 它会对数组遍历 它会创建一个新的数组，这个数组是它通过检查指定数组中符合条件的所有元素
       * 注意点： filter() 1、不会对空数组检索  2、不会改变原数组
       * 遍历数组的方法还有：forEach some findIndex
       */
      return this.carData.filter(item => {
        if (item.name.includes(keywords)) {
          return item
        }
      })
    },
    deleteItem (id) {
      /**
       * findIndex 返回符合这个元素在数组中的位置
       * @type {number}
       */
      let index = this.carData.findIndex(item => {
        if (item.id === id) {
          return true
        }
      })
      // 根据返回的位置删除元素
      this.carData.splice(index, 1)
    },
    padStr (timeStr) {
      if (timeStr.length < 2) {
        let timePad = '0' + timeStr
        return timePad
      } else {
        return timeStr
      }
    }
  },
  filters: {
    dataFormat (time, pattern = '') {
      if (pattern.toLowerCase() === 'yyyy-mm-dd') {
        let dt = new Date(time)
        let y = dt.getFullYear()
        let m = (dt.getMonth() + 1)
        let d = (dt.getDate())
        // return y + '-' + m + '-' + d
        /**
         * 关于`${expression}` 中间可以包含任意的表达式
         */
        return `${y}-${m}-${d}`
      } else {
        let dt = new Date(time)
        let y = dt.getFullYear()
        let m = (dt.getMonth() + 1)
        // let d = dt.getDate().toString().length > 1 ? dt.getDate() : ('0' + dt.getDate())
        let d = dt.getDate().toString().padStart(2, '0')
        let hh = dt.getHours().toString().padStart(2, '0')
        let mm = dt.getMinutes().toString().padStart(2, '0')
        let ss = dt.getSeconds().toString().padStart(2, '0')
        // return y + '-' + m + '-' + d
        /**
         * 关于`${expression}` 中间可以包含任意的表达式
         */
        return `${y}-${m}-${d}-${hh}:${mm}:${ss}`
      }
      // console.log('time======' + time)
    }
  },
  directives: {
    fouces: {
      'inserted': function (el) {
        el.focus()
      }
    },
    // 'color': {
    //   'bind': function (el, binding) {
    //     el.style.color = 'red'
    //     console.log('---value = ' + binding.value.value + '---color =' + binding.value.color)
    //   }
    // }
    'color': function (el, binding) {
      el.style.color = 'red'
      console.log('---value = ' + binding.value.value + '---color =' + binding.value.color)
    }
  },
  components: {
    TablePractice
  }

}
</script>

<style>
  .nav-title {
    height: 40px;
    background-color: aquamarine;
    line-height: 40px;
    padding-left: 20px;
    color: #000;
  }
  .leftPoint {
    margin-left: 10px;
  }
</style>
